<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox{
            width: 600px;
            height: 600px;
            background-color: 1px salmon;
        }
        .smbox{
            width: 500px;
            height: 500px;
            background-color:1px lawngreen;
        }
        .xsbox{
            width: 200px;
            height: 200px;

        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="smbox">
          <div class="xsbox">
        </div>
    </div>
    </div>
    <script>
        //事件捕获， 目标元素（事件源），事件冒泡；
        //addEventListener (事件类型，时间处理函数，[true/falase])
        //true;在捕获阶段处理事件程序
        //false:在冒泡阶段处理时间程序，默认值
        const xs = document.querySelector('.xsbox');
        //事件对象：时间处理行数的第一个参数
        xs.addEventListener('click',function(){
            console.log(evt.type);  //对象。属性：访问时间对象的type属性（事件类型）
            console.log(evt.target);  //触发事件的元素
            alert('点击小小盒子');
            evt.stopPropagation();   //阻至
        },false);
        const sm = document.querySelector('.smbox');
        sm.addEventListener('click',function(){
            alert('点击了小盒子');
            evt.stopPropagation();
        },false);
        
        document.activeElement('click',function(){
            alert('这是文档响应');
        },false);
    </script>
</body>
</html>
